<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 按钮 -->
    <div class="sale-btn">
      <div class="warp">
        <div class="touris-down">
          <!-- 全部 -->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">公私客</div>
            <div class="sale-list-li-input">
              <select v-model="formData.publicandprivate" placeholder="全部默认" style="width:90%;border: 1px solid #a0a0a0;height: 28px;" class="hidden_box">
                <option
                  v-for="item in screen.TouristsPublicandprivate"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <!-- 全部 emd-->

          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">委托日期</div>
            <div class="sale-list-li-input">
              <el-date-picker style="width:90%;cursor: pointer;"
                              v-model="formData.entrustment_time_s"
                              type="date"
                              placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">-----</div>
            <div class="sale-list-li-input">
              <el-date-picker
                v-model="formData.entrustment_time_e"
                type="date"
                placeholder="选择日期" style="width:90%;cursor: pointer;">
              </el-date-picker>
            </div>
          </div>


          <!-- 新增客源 -->
          <div class="sale-list-li sale-list-lit">
            <button @click="tour">新增客源</button>
            <button @click="Htran">客源转让</button>
          </div>
          <!-- 新增客源 end-->
        </div>
      </div>
    </div>
    <!-- 按钮end -->

    <!-- 筛选客源列表 -->
    <div class="sale-list">
      <div class="warp">
        <div class="sale-list-li">
          <div class="sale-list-li-left">交易</div>
          <div class="sale-list-li-input">
            <select v-model="formData.transaction" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in screen.TouristsTransaction"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <!--<div class="sale-list-li">-->
        <!--<div class="sale-list-li-left">归属人</div>-->
        <!--&lt;!&ndash;<div class="sale-list-li-input">&ndash;&gt;-->
        <!--&lt;!&ndash;<input type="text">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--</div>-->
        <div class="sale-list-li">
          <div class="sale-list-li-left">区域</div>
          <div class="sale-list-li-input">
            <select @change="getmendian" v-model="formData.region_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in quyu"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">门店</div>
          <div class="sale-list-li-input">
            <select @change="getzubie" v-model="formData.store_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in mendian"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">组别</div>
          <div class="sale-list-li-input">
            <select @change="getjjren" v-model="formData.group_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in zubie"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">经纪人</div>
          <div class="sale-list-li-input">
            <select v-model="formData.agent_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in jjren"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <button class="sale-search" @click="searList">查询</button>
          <button class="sale-search" @click="chongzhi">重置</button>
        </div>
      </div>
    </div>
    <!-- 筛选楼盘列表 end-->

    <!-- 客源列表 -->
    <div class="sale-info">
      <table>
        <!-- 标题 end-->
        <tr class="sale-info-title">
          <td>客源编号</td>
          <td>公私客</td>
          <td>交易</td>
          <td>姓名</td>
          <td>手机号</td>
          <td>售价(单价/总价)</td>
          <td>租金(月/年)</td>
          <td>用途</td>
          <td>装修</td>
          <td>委托日</td>
          <td>经纪人</td>
          <td>组别</td>
          <td>门店</td>
          <td>区域</td>
          <td>最后跟进日</td>
          <td>最后跟进人</td>
          <td>跟进</td>
          <td>编辑</td>
          <td>客户报备</td>
          <td>删除</td>

        </tr>
        <!-- 标题 end-->

        <!-- 列表循环 -->
        <tr v-for="item in allTours" @click="handleedits(item.id)">
          <td >{{item.id}}</td>
          <td >{{item.touristsPublicandprivate}}</td>
          <td>{{item.touristsTransaction}}</td>
          <td>{{item.name}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.saleunit_price}}/{{item.totalsales_price}}</td>
          <td>{{item.rent_price_month}}/{{item.rent_price_year}}</td>
          <td>{{item.touristsPurpose}}</td>
          <td>{{item.touristsRenovation}}</td>
          <td>{{item.entrustment_time}}</td>
          <td>{{item.userAgent}}</td>
          <td>{{item.departmentGroup}}</td>
          <td>{{item.departmentStore}}</td>
          <td>{{item.departmentRegion}}</td>
          <td>{{item.followup_time}}</td>
          <td>{{item.userFollowupuser}}</td>
          <td ><span class="edit" @click.stop="tFollows(item.id)">跟进</span></td>
          <td ><span class="edit" @click.stop="Edits(item.id)">编辑</span></td>
          <td style="width:4%;"><span class="edit" @click.stop="baobeiGo(item.id)">报备</span></td>
          <td ><span class="edit" @click.stop="handleDelete(item.id)">删除</span></td>
        </tr>
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list">
        <el-pagination
          layout="prev, pager, next"
          :total="Tours.total"
          :current-page="Tours.current_page"
          @current-change="SetHourList"
          :page-size="Tours.per_page">
        </el-pagination>
      </div>
      <!-- 分页 end-->
    </div>
    <!-- 客源列表 end-->

    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->

    <!-- 客源录入 弹窗-->
    <div v-show="Tourshow">
      <Tourmodal :SetHourList="SetHourList" :LDmodal="opensunmit" :TourClose="tour"></Tourmodal>
    </div>
    <!-- 客源录入 弹窗  end-->

    <!-- 客源转让 -->
    <div v-show="Htranshow">
      <HtranModal :SetHourList="SetHourList" :LDmodal="opensunmit" :HtranClose="Htran"></HtranModal>
    </div>
    <!-- 客源转让 end -->

    <!-- 客源编辑 -->
    <div v-show="Editshow">
      <Edit :SetHourList="SetHourList" :editData="editData" :LDmodal="opensunmit" :EditClose="Edits"></Edit>
    </div>
    <!-- 客源编辑 end -->
    <!--客源跟进-->
    <div v-show="TFollowshow">
      <Tfollow :closeFollows="closeFollows" :SetHourList="SetHourList" :LDmodal="opensunmit" :genjinID="genjinID" :TFollowClose="tFollows"></Tfollow>
    </div>
    <!--客源跟进-->
    <!--报备-->
    <Preparation :LDmodal="opensunmit" ref="getDatas" v-show="weishow" :baobeiClose="baobeiClose"></Preparation>
    <!--<div v-show="weishow">-->
    <!--<wei :SetHourList="SetHourList" :LDmodal="opensunmit" :weiClose="wei"></wei>-->

    <!--</div>-->
    <!--报备-->
    <!--客源详情-->
    <div v-show="handleeditsshow">
      <see  :sees="sees" :sid="sid" ref="sse" :seeClose="openedits"></see>
    </div>
    
    <!--客源详情-->
    <!--提示弹窗-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
  </div>
</template>
<script type="text/babel">
  import heads from './head.vue';
  import footers from './footer.vue';
  import Tourmodal from './tour-modal.vue';
  import HtranModal from './Ttran-modal.vue';
  import Edit from './tourists-edit.vue';
  import Modal from './modal.vue'
  import Tfollow from './TFollow.vue';
  import see from './see-tour';
  // import wei from './wei.vue'
  import Preparation from './Preparation.vue'


  export default {
    name: 'TouristsList',
    components: {
      heads,
      footers,
      Edit,
      Tourmodal,
      HtranModal,
      Modal,
      Tfollow,
      see,
      // wei
      Preparation
    },
    data() {
      return {
        // _pages:0,
        sees:{},
        sid: 0,
        // valueNumber:1,//分页所需数字
        genjinID: 1,//跟进ID
        //客源的ID/编号
        quyu: [],
        mendian: [],
        zubie: [],
        jjren: {},
        weishow:false,
        TFollowshow: false,
        submitShow: false,
        message: '',
        pushTo: '',
        screen: [],
        Tourshow: false,
        Editshow: false,
        Htranshow: false,
        handleeditsshow: false,
        Tours: {},
        allTours: [],
        editData: {},
        formData: {
          page: 1
        },
        id: ''

      }
    },
    methods: {

      // 删除{params:{id:id}} 带id
      handleDelete(id){
        console.log(this.formData)
        this.$http.get('/newapi/Tourists/delete/',{params:{id:id}
        }).then(({data})=>{
          this.submitShow = true;
          this.message = data.res;
          // if(data.status === 1){
          //   this.searList(this._pages)
          // }
        })

      },
      // 删除
      //报备
      baobeiGo(id){
        let that = this;
        that.$store.state.KHid = id;
        that.$refs.getDatas.getKHmessage();
        that.$refs.getDatas.getInitialData();


        that.weishow = true;

      },
      // 关闭报备
      baobeiClose(){
        this.weishow = false;
      },
      //详情
      handleedits: function (id) {

        this.$refs.sse.getRecord();


        this.$refs.sse.getPassenger(id);

        this.sid = id
        this.handleeditsshow = !this.handleeditsshow;
        let that = this
        this.$http.get('/newapi/Tourists/index/'+id)
        .then(res => {
          that.sees = res.data;
        })
        .catch(function (err) {
          console.log(err);
        })
      },
      openedits() {
        this.handleeditsshow = !this.handleeditsshow
      },

      //跟进
      tFollows(id) {
        let that = this;
        that.genjinID = id;
        that.TFollowshow = true;
      },
      //关闭跟进
      closeFollows(){
        this.TFollowshow = false
      },
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true
      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      // 设置筛选下拉
      SetscreenList() {
        let that = this;
        this.$http.get('/newapi/Touristslist/index')
        .then(function (res) {
          that.screen = res.data.res;
        })
        .catch(function (err) {
          console.log(err);
        })
      },
      //报备
      //   wei(id){
      //   this.genjinID = id;
      //   this.weishow = !this.weishow
      //   },
      //重置
      chongzhi() {
        this.formData = {};
      },
      //获取门店
      getmendian() {
        let that = this;
        that.$http.get('/index/department', {
          params: {
            id: that.formData.region_id
          }
        }).then(res => {
          that.mendian = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      //获取组别
      getzubie() {
        let that = this;
        that.$http.get('/index/department', {
          params: {
            id: that.formData.store_id


          }
        }).then(res => {
          that.zubie = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      //获取经纪人
      getjjren() {
        let that = this;
        that.$http.get('/index/department/staff_group/' + that.formData.group_id, {
          // params:{
          //   id : that.formData.group_id
          // }
        }).then(res => {
          that.jjren = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      // 录入客源
      tour: function () {
        this.Tourshow = !this.Tourshow
      },
      // 客源编辑
      Edits: function (id) {
        this.Editshow = !this.Editshow;
        let that = this;
        that.$http.get('/newapi/Tourists/getdetail', {params: {id: id}})
        .then(function (res) {
          // console.log(res.data.res);
          let editList = res.data.res;
          that.editData = editList
        })
        .catch(function (err) {
          console.log(err);
        })


      },
      // 客源传让
      Htran: function () {
        this.Htranshow = !this.Htranshow
      },
      // 设置客源列表
      searList() {
        let that = this;
        that.formData.page = 1;
        // this._pages = page;
        this.$http.get('/newapi/Tourists/index', {
          params: that.formData
        })
        .then(function (res) {
          that.Tours = res.data.res;
          that.allTours = res.data.res.data;
        })
        .catch(function (err) {
          console.log(err);
        })
      },
      SetHourList(val) {
        let that = this;
        that.formData.page = val;
        this.$http.get('/newapi/Tourists/index', {
          params: that.formData
        })
        .then(function (res) {
          that.Tours = res.data.res;
          that.allTours = res.data.res.data;
        })
        .catch(function (err) {
          console.log(err);
        })
      },
    },
    mounted: function () {
      let that = this;


      that.SetscreenList();
      that.searList();
      // 设置区域下拉列表

      that.$http.get('/index/department')
      .then(function (res) {
        that.quyu = res.data;
        console.log(res.data)
      })
      .catch(function (err) {
        console.log(err);
      });
      //获取归属人
      // that.$http.get('/index/department/tree')
      //   .then(res => {
      //     console.log(res)
      //   }).catch(err => {
      //   console.log(err)
      // })
    }

  }
</script>

<style scoped>
  .touris-down {
    width: 100%;
    float: left;
  }

  .sale-list-li-leftt {
    margin-top: 6px !important;
  }

  .sale-list-lit {
    margin-top: 0 !important;
  }

  .sale-info {
    width: 100%;
    float: left;
    position: fixed;
    top: 205px;
    height: calc(100% - 256px);
    overflow-y: auto;
  }

  table {
    width: 100%;
  }

  table td {
    line-height: 30px;
    height: 30px;
    border: 1px solid #d3d3d3;

  }

  .sale-list-li-inputz input {
    width: 40% !important;
    float: left;
  }

  .sale-list-li-inputz input:nth-child(2) {
    margin-left: 8%
  }

  .sale-list-li-left {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
    font-weight:bold;
  }

  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }

  .sale-list-li {
    width: 100%;
    float: left;
    margin-top: 10px;
  }

  .sale-list-li-input {
    width: 70%;
    float: left;
  }

  tr:nth-child(n+2):hover{
    background: #f9f9f9;
  }

  .sale-search {
    margin-left: 25px;
    background: #415dba;
    color: #ffffff;
    font-size: 1.1em;
    border: none;
    height: 30px;
    line-height: 30px;
    width: 60px;
    border-radius: 5px;
    cursor: pointer;
  }

  .sale-info-title {
    width: 100%;
    overflow: hidden;
    background-color: #1590ed;
    font-weight:bold;
    color: #fff;
  }

  .sale-list-li-input input {
    width: 90%;
    float: left;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #d3d3d3;
  }

  .sale-btn {
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background-color: #ecedee;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 40px;
  }

  .sale-btn button {
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #415dba;
    color: #fff;
    margin-left: 30px;
    border: none;
    cursor: pointer;
  }

  .sale-list {
    position: fixed;
    top: 121px;
    background: #f9f9f9;
    float: left;
    width: 100%;
    left: 0;
    height: 75px;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e2;
  }

  .sale-list-li {
    width: 16.666666667%;
    float: left;
  }
  select{
    cursor: pointer;
  }
  .edit{
    cursor: pointer;
  }
</style>
